<template>
  <el-row class="index-header">
    <!--logo-->
    <el-col :span="4">
      <el-image :src="require('@/assets/logo.jpg')" class="logo" @click="handleLogo" />
    </el-col>
    <!--导航栏-->
    <el-col :span="16">
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        text-color="#2ac06d"
        active-text-color="#C03639"
        @select="handleSelect"
      >
        <el-menu-item
          v-for="(item, index) in classify"
          :key="index"
          :index="index + ''"
        >
          {{ item }}
        </el-menu-item>
      </el-menu>
    </el-col>
    <!--按钮区-->
    <el-col :span="4" class="btn">
      <el-row type="flex" justify="center" align="middle">
        <el-dropdown v-show="!$store.getters.roles.includes('sys-root') && !$store.getters.roles.includes('sys-admin') && !$store.getters.roles.includes('teacher')" @command="handleCommand">
          <span class="el-dropdown-link">
            我的课程
            <i class="el-icon-caret-bottom el-icon--right" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="my">我的课程</el-dropdown-item>
            <el-dropdown-item command="today">今日课程</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-divider direction="vertical" />
        <template v-if="username !== ''">
          <el-dropdown>
            <span class="el-dropdown-link">
              {{ username }}
              <i class="el-icon-caret-bottom el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <router-link v-show="$store.getters.roles.includes('sys-root') || $store.getters.roles.includes('sys-admin') || $store.getters.roles.includes('teacher')" to="/dashboard/dashboard">
                <el-dropdown-item>管理后台</el-dropdown-item>
              </router-link>
              <router-link to="/account">
                <el-dropdown-item>个人中心</el-dropdown-item>
              </router-link>
              <router-link v-show="!$store.getters.roles.includes('sys-root') && !$store.getters.roles.includes('sys-admin') && !$store.getters.roles.includes('teacher')" to="/reserve/my-reserve">
                <el-dropdown-item>我的预约</el-dropdown-item>
              </router-link>
              <router-link v-show="!$store.getters.roles.includes('sys-root') && !$store.getters.roles.includes('sys-admin') && !$store.getters.roles.includes('teacher')" to="/my-order">
                <el-dropdown-item>我的订单</el-dropdown-item>
              </router-link>
              <el-dropdown-item divided @click.native="logout">
                <span style="display:block;">注销登录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
        <template v-else>
          <el-button type="text" class="btn-login" @click="$router.push({ path: redirect || '/login', query: otherQuery })">登录</el-button>
          <el-button type="text" @click="toRegister">注册</el-button>
        </template>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>

export default {
  name: 'IndexHeader',
  props: {
    classify: {
      required: true,
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      activeIndex: '0',
      // 判断用户是否登录,
      redirect: '',
      otherQuery: {}
    }
  },
  computed: {
    username() {
      return this.$store.getters.realName !== '' && this.$store.getters.realName != null ? this.$store.getters.realName : this.$store.getters.name
    },
    courseClassify() {
      return this.$store.getters.classify
    }
  },
  watch: {
    courseClassify(newVal) {
      this.activeIndex = this.$store.getters.typeList.findIndex((val) => {
        return val === newVal
      }) + ''
      // this.activeIndex = this.classify.findIndex(newVal)
    },
    $route: {
      handler: function(route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    }
  },
  created() {
  },
  methods: {
    // 点击logo事件处理
    handleLogo() {
      console.log('点击logo')
      this.$store.commit('course/SET_CLASSIFY', this.classify[0])
      this.$router.push({ path: '/' })
    },
    // 选择导航栏事件处理
    handleSelect(key) {
      this.$store.commit('course/SET_CLASSIFY', this.classify[key])
      this.$router.push({ path: '/index' })
      // this.$emit('handleSelect', this.classify[key])
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push('/index')
    },
    handleCommand(command) {
      this.$store.commit('course/SET_COURSESTATE', command)
      if (this.username !== '') {
        this.$router.push('/my-course')
      } else {
        this.$router.push('/login?redirect=my-course')
      }
    },
    // 跳转注册页面
    toRegister() {
      this.$store.commit('user/SET_IS_REGISTER', true)
      this.$router.push({ path: this.redirect || '/login', query: this.otherQuery })
    }
  }
}
</script>

<style lang="scss" scoped>
.index-header{
  padding: 10px 100px 0;
  height: 72px;
  background-color: #FFFFFF;
  border-bottom: 2px solid rgb(226,226,228);
  .logo {
    cursor: pointer;
    height: 55px;
  }
  .el-menu {
    border-bottom: 2px solid rgb(226,226,228);
    .el-menu-item {
      width: 100px;
      text-align: center;
    }
  }
  .btn {
    height: 100%;
    .el-row {
      height: 100%;
      .el-dropdown {
        min-width: 90px;
      }
      .el-dropdown-link {
        margin-right: 10px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .btn-login {
        margin-left: 10px;
      }
    }
  }
}
</style>
